<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-prod-parameter">
    <view class="content">
      <view
        v-for="(item, index) in prodParameterList"
        :key="index"
        class="list"
      >
        <view class="header">
          <text>{{ '参数' + (index + 1) }}</text><text
            class="del"
            @click="del(index)"
          >
            删除
          </text>
        </view>
        <view class="main">
          <view class="parameter-name">
            <text class="name">
              参数名
            </text><input
              v-model="item.parameterKey"
              type="text"
              maxlength="10"
              placeholder="请输入"
              placeholder-style="color:#999;font-size:28rpx"
              @blur="item.parameterKey = item.parameterKey.trim()"
            >
          </view>
          <view class="parameter-values">
            <text class="name">
              参数值
            </text><input
              v-model="item.parameterValue"
              type="text"
              maxlength="20"
              placeholder="请输入"
              placeholder-style="color:#999;font-size:28rpx"
              @blur="item.parameterValue = item.parameterValue.trim()"
            >
          </view>
        </view>
      </view>

      <view
        v-if="prodParameterList.length > 0"
        class="text"
      >
        参数名和参数值显示在商品详情开头，参数名不超过10字，参数 值不超过20字
      </view>
      <empty-tips
        v-show="prodParameterList.length < 1"
        :tips-list="['暂无数据']"
      />
    </view>

    <view class="footer-btn">
      <common-btn
        :btn-config="prodParameterList.length > 0 ? parameterBtnConfig : oneParameterBtnConfig"
        @handle-click-more-btn="handleClickMoreBtn"
        @handle-click-btn="handleClickMoreBtn"
      />
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

const Data = reactive({
  parameterBtnConfig: {
    btnList: [
      {
        btnText: '继续添加',
        isPlain: true
      },
      {
        btnText: '添加完成',
        isPlain: false
      }
    ]
  },
  oneParameterBtnConfig: {
    btnList: [
      {
        btnText: '添加参数',
        isPlain: true
      },
      {
        btnText: '添加完成',
        isPlain: false
      }
    ]
  },
  prodParameterList: []
})

const { parameterBtnConfig, oneParameterBtnConfig, prodParameterList } = toRefs(Data)

const prodStore = useProdStore()

onMounted(() => {
  Data.prodParameterList = JSON.parse(JSON.stringify(prodStore.dataForm.prodParameterList))
})

// 点击底部按钮（批量，发布）
const handleClickMoreBtn = (index) => {
  if (index === 2) {
    const aaa = Data.prodParameterList.some(item => !item.parameterValue || !item.parameterKey || item.parameterKey === '' || item.parameterValue === '')
    if (aaa) {
      uni.showToast({
        title: '请填写参数',
        icon: 'none'
      })
    } else {
      prodStore.dataForm.prodParameterList = Data.prodParameterList
      uni.redirectTo({
        url: '/package-prod/pages/post-prod/post-prod'
      })
    }

    return
  }
  Data.prodParameterList.push({})
}

const del = (index) => {
  Data.prodParameterList.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.page-prod-parameter {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  overflow: auto;

  flex: 1;
  background-color: #F2F3F7;
  color: #333;
  font-size: 28rpx;

  .header {
    padding: 0 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;

    .del {
      color: #082BA6;
    }
  }

  .text {
    padding: 20rpx 30rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .main {
    padding: 0 30rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .parameter-name {
      height: 44rpx;
      padding: 22rpx 0;
      border-bottom: 2rpx solid #F2F2F2;
      display: flex;

      .name {
        color: #999999;
        margin-right: 20rpx;
      }

      input {
        font-size: 28rpx;
      }
    }

    .parameter-values {
      height: 44rpx;

      padding: 22rpx 0;
      display: flex;

      .name {
        color: #999999;
        margin-right: 20rpx;
      }

      input {
        font-size: 28rpx;
      }
    }
  }
}
</style>
